<template>
	<com-popup direction="bottom" :visible="visibleSync" @hide="hide">
		<view @touchmove.stop.prevent :style="{'background-color': borderColor}">
			<view class="com-security-title y-flex y-row y-align-center pt-20 pb-20 page-padding-gap"
			:style="{
				'border-bottom-color': textOpacColor
			}">
				<com-icon name="close" :color="textColor" size="50" @click="hide"></com-icon>
				<text class="fs-36 y-flex-1 text-align-center" :style="{color: textColor}">{{title}}</text>
				<com-icon name="close" color="rgba(0,0,0,0)" size="50"></com-icon>
			</view>
			<view class="com-security-pwds y-flex y-row y-align-center mt-80 mb-50 ml-80 mr-80"
			:style="{'border-color': textOpacColor}">
				<view class="com-security-pwd y-flex-1 position-relative y-flex y-align-center y-justify-center"
				:style="{
					'border-right-color': index < pwd.length - 1 ? textOpacColor : '',
					'border-right-width': index < pwd.length - 1 ? '1px' : ''
				}"
				v-for="(item, index) in pwd" :key="index">
					<text class="fs-32" :style="{color: textColor}">{{item > -1 ? '●' : ''}}</text>
					<view class="com-security-pwd-cursor" :style="{opacity: cursorOpac, 'background-color': textColor}" v-if="cursorIndex == index"></view>
				</view>
			</view>
			<text class="fs-34 fr-primary text-align-center mb-30">{{message}}</text>
			<com-keyboard
			v-model="valueSync"
			:bgColor="bgColor"
			:borderColor="borderColor"
			:textColor="textColor"
			:count="count"></com-keyboard>
		</view>
	</com-popup>
</template>

<script>
	import { hexToRgba } from '@/assets/js/util.js'
	export default {
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: ''
			},
			message: {
				type: String,
				default: '请输入密码'
			},
			value: {
				type: String,
				default: ''
			},
			count: {
				type: [String, Number],
				default: 6
			},
			bgColor: {
				type: String,
				default: '#FFFFFF'
			},
			borderColor: {
				type: String,
				default: '#EEEEEE'
			},
			textColor: {
				type: String,
				default: '#333333'
			}
		},
		data () {
			return {
				valueSync: '',
				visibleSync: false,
				cursorOpac: 1,
				cursorDuration: 600
			}
		},
		computed: {
			pwd () {
				let pwd = this.valueSync.split('') || []
				let len = 6 - pwd.length
				for ( let i = 0; i < len; i++ ) {
					pwd.push(-1)
				}
				return pwd
			},
			cursorIndex () {
				let arr = this.pwd.filter(pwd => pwd > -1)
				return arr.length > 0 ? arr.length : 0
			},
			textOpacColor () {
				return hexToRgba(this.textColor, 0.5)
			}
		},
		created() {
			this.visibleSync = this.visible
		},
		mounted () {
			if ( this.visibleSync ) {
				this.cursorAnimation()
			}
		},
		methods: {
			cursorAnimation () {
				this.cursorOpac = this.cursorOpac > 0 ? 0 : 1;
				clearTimeout(this.timer);
				this.time = null
				this.timer = setTimeout(() => {
					if ( this.visibleSync ) {
						this.cursorAnimation();
					}
				}, this.cursorDuration);
			},
			hide () {
				this.$emit('update:visible', false)
				this.visibleSync = false
			},
			reset () {
				this.valueSync = '';
				this.cursorIndex = 0;
			}
		},
		watch: {
			cursorIndex () {
				this.cursorOpac = 1;
			},
			visible (newVal) {
				this.visibleSync = newVal
				if ( newVal ) {
					this.cursorAnimation()
				} else {
					this.reset()
				}
			},
			valueSync (newVal) {
				if ( newVal.toString().length >= 6 ) {
					this.$emit('confirm', this.valueSync)
				}
			}
		}
	}
</script>

<style scoped>
	.com-security-title {
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}
	.com-security-pwds {
		border-width: 1px;
		border-style: solid;
		border-radius: 10rpx;
	}
	.com-security-pwd {
		border-right-style: solid;
		height: 80rpx;
	}
	.com-security-pwd-cursor {
		position: absolute;
		top: 20rpx;
		left: 40rpx;
		transform: translateX(-0.5px);
		height: 40rpx;
		width: 1px;
		background-color: #333;
	}
</style>
